<template>
  <div class="comment-con">
    <div class="subtitle">发表评论</div>
    <hr />
    <textarea v-model="msg"
      placeholder="请输入要评论的内容（最多120个字）"
      maxlength="120"
    ></textarea>
    <mt-button type="primary" size="large" @click="postComments()">发表评论</mt-button>
    <div class="comment-item">
      <ul>
        <li v-for="(item, i) in comments" :key="item.id">
          <div class="comment-per">
            第{{ i+1 }}楼 用户：匿名用户 发表时间：2021-1-24 12:12:12
          </div>
          <div class="comment-info">{{ item.contant }}</div>
        </li>
      </ul>
    </div>
    <mt-button type="danger" size="large" plain @click="getMoreComments()"
      >加载更多</mt-button
    >
  </div>
</template>

<script>
// 导入Toast
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      message: [
        {
          id: 2,
          contant: "处处闻啼鸟",
        },
      ],
      comments: [
        {
          id: 1,
          contant: "春眠不觉晓",
        },
      ],
      comment1:[],
      msg: ""
    };
  },
  methods: {
    getMoreComments() {
      this.comments = this.comments.concat(this.message);
      // console.log(this.$route.params.id);
    },
    postComments() {
      if (this.msg.trim().length === 0) {
        return Toast("评论内容不能为空")
      }
      var com1 = {id:3,contant: this.msg.trim()}
      this.comment1.push(com1)
      this.comments = this.comments.concat(this.comment1)
      this.msg = ""
    }
  },
  // props: ["id"],
};
</script>

<style lang="scss" scoped>
.comment-con {
  font-size: 14px;
  color: black;
  textarea {
    font-size: 12px;
  }
  .comment-item {
    * {
      list-style: none;
      padding: 0;
      margin: 3px 0;
    }
    font-size: 12px;
    margin: 0;
    color: black;
    font-weight: 200;
    .comment-per {
      padding: 5px 0;
      background-color: #ccc;
    }
    .comment-info {
      padding: 4px 0;
      text-indent: 2em;
      line-height: 12px;
    }
  }
}
</style>